/*
 * @Date: 2022-03-29 12:53:42
 * @LastEditors: LiuPeng
 * @LastEditTime: 2022-04-02 10:30:05
 * @FilePath: \payment\pay\src\pages\AgencyPay\AgencyCardDetail.jsx
 */
import React, { useState } from 'react'
import {
  Row, Col,
  Form,
  Select, DatePicker,
  Button, Table
} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN'
import { ConfigProvider } from 'antd';
// 引入样式
import myStyle from './CSS/AgencyPayOrder.module.css'
// 引入初始化数据
import {
  AccountChangeType,
  CardDealerList,
  cardDealerDetailsData,
  columns,
  total
} from '../../initData/AgencyCardDetail'


const { Option } = Select;
const { RangePicker } = DatePicker;

export default function AgencyCardDetail() {
  // 初始状态
  // 初始表格数据
  let [initTableData] = useState(cardDealerDetailsData)
  // 商户名称
  let [AccountChangeTypeName] = useState(AccountChangeType)
  // 订单状态
  let [CardDealer] = useState(CardDealerList)

  return (
    <>
      {/* 搜索区域 */}
      <Row className={myStyle.row_margin}>
        <Form
          name="searchForm"
          layout='inline'
          size='large'
        >
          <Col span={5}>
            <Form.Item name="AccountChangeTypeName"
            >
              <Select placeholder='帐变类型'>
                {/* 动态渲染下拉列表 */}
                {
                  AccountChangeTypeName.map(item => <Option key={item.id} value={item.name}>{item.name}</Option>)
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={5}>
            <Form.Item name="CardDealer">
              <Select placeholder='卡商'>
                {/* 动态渲染下拉列表 */}
                {
                  CardDealer.map(item => <Option key={item.id} value={item.value}>{item.value}</Option>)
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item name="entryTime">
              <RangePicker placeholder={['开始时间', '结束时间']} />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item >
              <Button style={{ 'marginRight': '10px' }} type="primary" icon={<SearchOutlined />}>
                搜索
              </Button>
            </Form.Item>
          </Col>
        </Form>
      </Row>
      {/* 表格区域 代付订单数据 */}
      <Row >
        <Col span={24}>
          <ConfigProvider locale={zhCN}>
            <Table
              columns={columns}
              dataSource={initTableData}
              tableLayout='fixed'
              scroll={{ x: 1300 }}
              bordered
              showSorterTooltip={false}
              pagination={{
                total: total,
                position: ['bottomLeft'],
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: total => `共 ${total} 条`
              }}
            >
            </Table>
          </ConfigProvider>
        </Col>
      </Row>
    </ >
  )
}
